<template>
    <div class="top-main" ref="topMainRef">
        <el-icon v-if="!isHovered" style="position: absolute;left:5px;color:white;font-size:40px;top:35%;">
            <ArrowLeftBold />
        </el-icon>
        <div style="position:absolute;width:100%;height:100px;">
            <h1 class="login" style="position: absolute;color:white;font-size:40px;left:35%;top:10px;" @click="ToLogin">
                首页</h1>
            <h6 class="register" style="position: absolute;color:white;font-size:20px;left:32%;top:80px;">了解此网站</h6>
        </div>
    </div>
</template>
<script lang="ts" setup>
import { ref, onMounted, onUnmounted } from 'vue'; 
import {useRouter} from 'vue-router'
const router =useRouter();

const isHovered = ref(false);
const topMainRef = ref<HTMLElement | null>(null);

function ToLogin() {
    if(router.currentRoute.value.path!=='/Home'){
        router.replace('/Home');
    }
}
onMounted(() => {  
    const topMain = topMainRef.value;  
    if (topMain) {  
        topMain.addEventListener('mouseenter', () => {  
            isHovered.value = true;  
        });  
        topMain.addEventListener('mouseleave', () => {  
            isHovered.value = false;  
        });  
    }  
});  
  
onUnmounted(() => {  
    const topMain = topMainRef.value;  
    if (topMain) {  
        topMain.removeEventListener('mouseenter', () => {  
            isHovered.value = true;  
        });  
        topMain.removeEventListener('mouseleave', () => {  
            isHovered.value = false;  
        });  
    }  
});  
</script>
<style scoped>
.top-main {
    position: absolute;
    left: 1550px;
    transition: transform 0.3s ease;
}

.top-main:hover {
    /* 鼠标悬停时的样式 */
    transform: translateX(-200px);
    /* 向下移动400px */
}

.login:hover,
.register:hover {
    cursor: pointer;
}
</style>